<template>
  <section class="page">
    <data-form :model="model" @onSearch="refreshData" :page="pageService">
      <template slot="default-input">
        <el-form-item label="会员编号" prop="memberNo">
          <el-input v-model="model.memberNo"></el-input>
        </el-form-item>
        <el-form-item label="会员名称" prop="name">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="model.mobile"></el-input>
        </el-form-item>
        <el-form-item label="会员状态" prop="memberStatus">
          <el-select size="small" v-model="model.memberStatus">
            <el-option v-for="{code,name} in this.$dict.getDict(DictType.MemberStatus)" :key="code" :label="name" :value="code"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template slot="default-button">
        <el-button @click="dialog.isOpenAddMember = true">添加会员</el-button>
      </template>
    </data-form>

    <data-box :page="pageService" @onPageChange="refreshData" :data="dataList">
      <template slot="columns">
        <el-table-column prop="memberNo" label="会员编号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="会员姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productName" label="产品名称" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productContent" label="产品内容" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="productPrice" label="产品价格" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="price" label="支付价格" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="count" label="总次数" :min-width="$helper.getColumnWidth(2)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="leaveCount" label="剩余次数" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="lastTime" label="上次使用时间" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="memberStatus" label="会员状态" :min-width="$helper.getColumnWidth(3)" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{$dict.dictConvert('MemberStatus', scope.row.memberStatus)}}</span>
          </template>
        </el-table-column>
      </template>
    </data-box>

    <!-- 新增会员 -->
    <el-dialog title="新增会员" :close-on-click-modal="false" :show-close="false" :visible.sync="dialog.isOpenAddMember" @open="$nextTick(() => $refs['add-member'].refresh())">
      <add-member ref="add-member" @close="dialog.isOpenAddMember = false" @refreshData="refreshData()"></add-member>
    </el-dialog>

  </section>
</template>


<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/util/page.service";
import DataBox from "~/components/common/data-box.vue";
import DataForm from "~/components/common/data-form.vue";
import AddMember from "~/components/member-manage/add-member.vue";
import { MemberService } from "~/service/service-member/member.service";
import { DictType } from '~/config/enum/dict/dict-type.enum';

@Layout("workspace")
@Component({
  components: {
    DataBox,
    DataForm,
    AddMember
  }
})
export default class MemberManage extends Vue {
  @Dependencies(PageService)
  private pageService: PageService
  @Dependencies(MemberService)
  private memberSeervice: MemberService

  private DictType: any = DictType

  private model: any = {
    memberNo: '',
    name: '',
    mobile: '',
    memberStatus: null
  }

  private dataList: any[] = []

  private dialog: any = {
    isOpenAddMember: false
  }

  private activated() {
    this.refreshData()
  }

  private refreshData() {
    this.memberSeervice.findAllListByPage(this.model, this.pageService).subscribe(
      data => this.dataList = data || [],
      error => this.$message.error(error.message)
    )
  }
}
</script>
<style lang="less">
</style>


